<template>
  <!-- ... 其他内容 ... -->
  
  <!-- 热门标签后添加工具栏目 -->
  <div class="sidebar-section">
    <h2 class="section-title">
      <i class="fas fa-tools"></i>
      实用工具
    </h2>
    <div class="tools-list">
      <ToolCard
        title="ER图生成工具"
        description="快速生成数据库ER关系图，支持多种数据库"
        icon="fas fa-project-diagram"
        to="/ertools"
        status="new"
      />
      <!-- 后续可以继续添加其他工具 -->
    </div>
  </div>
</template>

<script>
import ToolCard from './ToolCard.vue'

export default {
  components: {
    ToolCard
  }
  // ... 其他配置
}
</script>

<style scoped>
/* ... 其他样式 ... */

.tools-list {
  margin-top: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i {
  color: var(--primary-color);
}
</style> 